/**
 * Copyright (c) 快宝网络 kuaidihelp.com Co., Ltd. All Rights Reserved 禁止外泄以及用于其它的商业用途
 */

/**
 * 新零售的账号添加修改
 */
import React, { PureComponent, Fragment } from "react";
import { Modal, Form, Input } from "antd";
import { password } from "@/components/_utils/rule";
import { connect } from "dva";

const { Item: FormItem } = Form;

@connect(({ loading }) => ({
  adding: loading.effects["accounts/add"],
}))
@Form.create()
class Add extends PureComponent {
  constructor() {
    super();
    this.state = {
      visible: false,
    };
  }

  handleClick() {
    this.setState({
      visible: true,
    });
  }

  handleCancel() {
    this.setState({
      visible: false,
    });
  }

  handleOk() {
    const {
      form,
      dispatch,
      data: { id },
      onAdded,
    } = this.props;
    form.validateFields((err, values) => {
      if (err) return;
      if (id) {
        values.id = id;
      }
      dispatch({
        type: "accounts/add",
        payload: {
          ...values,
        },
        then: () => {
          this.handleCancel();
          form.resetFields();
          onAdded();
        },
      });
    });
  }

  render() {
    const { form, adding, data } = this.props;
    const { visible } = this.state;
    return (
      <Fragment>
        <span onClick={this.handleClick.bind(this)}>{this.props.children}</span>
        <Modal
          width={545}
          centered
          title={`${data.phone ? "修改" : "新增"}账号`}
          visible={visible}
          onCancel={this.handleCancel.bind(this)}
          onOk={this.handleOk.bind(this)}
          okButtonProps={{ loading: adding }}
        >
          <Form labelCol={{ span: 4 }} wrapperCol={{ span: 20 }} hideRequiredMark>
            <FormItem label="登录手机号" help="">
              {form.getFieldDecorator("phone", {
                initialValue: data.phone,
                rules: [
                  {
                    max: 11,
                  },
                  {
                    required: true,
                    message: "必填",
                  },
                ],
              })(<Input maxLength={11} placeholder="请输入快宝智慧快递管理平台的登录手机号" />)}
            </FormItem>
            <FormItem label="账户名" help="">
              {form.getFieldDecorator("name", {
                initialValue: data.name,
                rules: [
                  {
                    max: 20,
                  },
                  {
                    required: true,
                    message: "必填",
                  },
                ],
              })(<Input maxLength={20} placeholder="请输入账户名" />)}
            </FormItem>
            <FormItem label="密码">
              {form.getFieldDecorator("pwd", {
                initialValue: data.blank_pwd,
                rules: [
                  {
                    required: true,
                    message: "必填",
                  },
                  password,
                ],
              })(<Input placeholder="请输入密码" />)}
            </FormItem>
          </Form>
        </Modal>
      </Fragment>
    );
  }
}

Add.defaultProps = {
  data: {},
  onAdded: () => {},
};

export default Add;
